import React, { useState, useEffect, useImperativeHandle } from 'react';
import TitleLine from 'components/common/titleLine';
import UploadPanel from 'components/common/uploadPanel';
import UploadPanelIE from 'components/common/uploadPanelIE';
import { randomString } from 'utils/format'
import { connect } from 'dva'
import { IsIE_nine } from 'utils/format'
import './index.styl';

function Archives({ cRef, actionType, id, deviceLedger: { detail } }) {
  // 设备档案
  const [fileList, setFileList] = useState([])
  const [flag, setFlag] = useState(0)
  const [editFileList, setEditFileList] = useState([])
  const [fileName, setFileName] = useState([])
  useImperativeHandle(cRef, () => ({
    fileList,
    flag,
    fileName
  }));
  useEffect(() => {
    // 自定义添加一个uid 删除的时候是根据uid删除的
    if (id) {
      if (detail && detail.deviceFileList) {
        setEditFileList(detail.deviceFileList.map(item => {
          item.uid = randomString()
          return item
        }))
        setFileList(detail.deviceFileList.map(item => {
          item.uid = randomString()
          return item
        }))
      }
    }
  }, [detail, id])
  return (
    <div className="archives">
      <TitleLine title={'设备档案'} />
      {
          IsIE_nine() === 9 ? (
            <UploadPanelIE
              mb={50}
              num={20}
              index={2}
              getFileList={v => setFileList(v)}
              getFileName={v => setFileName(v)}
              editFileList={editFileList}
              isNone={true}
              actionType={actionType}
              tip="设备档案资料"
            />
          ) : (
            <UploadPanel
              mb={50}
              num={20}
              flag={flag}
              uploadNum={(val) => setFlag(val)}
              getFileList={v => setFileList(v)}
              getFileName={v => setFileName(v)}
              editFileList={editFileList}
              isNone={true}
              actionType={actionType}
              tip="设备档案资料"
            />
          )
        }
    </div>
  );
}

export default connect(({ deviceLedger }) => ({
  deviceLedger
}))(Archives);
